<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="layui/css/layui.css" media="all" />
    <script src="layui/layui.js" type="text/javascript"></script>
</head>
<body>
<script type="text/html" class="demoTable" id="myDiv" >
    <div style="float:right">
        <button class="layui-btn layui-btn-sm" data-type="reload" lay-event="insert"><i class="layui-icon">&#xe654;</i>新增</button>
        <button class="layui-btn layui-btn-sm" data-type="reload" lay-event="delAll">批量删除</button>
    </div>
    <form class="layui-form layui-col-space5">
        <div class="layui-inline layui-show-xs-block">
            <label class="layui-form-label" style="width: 110px; text-align: center">券商名称</label>
            <div class="layui-inline layui-show-xs-block">
                <input class="layui-input" placeholder="请输入证券名" name="securityName" style="width: 250px" id="securityName">
            </div>
        </div>
        <div class="layui-inline layui-show-xs-block">
            <button class="layui-btn layui-btn-primary" lay-event="selecttwo" lay-submit="selecttwo" lay-filter="selecttwo"><i class="layui-icon">&#xe615;</i>搜索</button>
        </div>
    </form>
</script>
<script type="text/javascript">
    layui.use(['table','form','laydate'], function () {
        var $ = layui.$;
        var table = layui.table;
        var form = layui.form;
        var laydate = layui.laydate;
        var tableSelect = layui.tableSelect
        table.render({
            elem: '#trackone'
            ,id: 'testSecurity'
            ,page: true
            ,limits:[1,5,10]
            ,url:'select?securityName='
            ,toolbar:'#myDiv'
            ,height:'full-20'
            ,cellMinWidth: 80//全局定义常规单元格的最小宽度，layui 2.2.1 新增
            ,cols: [[
                 {type: 'checkbox', fixed: 'left'}
                ,{field:'securityId',title: '证券编号'}
                ,{field:'securityName',title: '证券名称'}
                ,{field:'securitType',title: '证券类型',templet:function (item) {
                        if (item.securitType == 1) {
                            return '股票';
                        } else if (item.securitType == 2) {
                            return '债券';
                        }
                    }
                }
                ,{field:'stockName', title: '股票板块',hide:true}
                ,{field: 'releaseDate', title:'发行日期'}
                ,{field:'delayDate', title: '延迟日期',templet:function (item) {
                        if (item.delayDate == 1) {
                            return 'T+1';
                        } else if (item.delayDate == 2) {
                            return 'T+2';
                        }else if (item.delayDate == 3) {
                            return 'T+3';
                        }else if (item.delayDate == 4) {
                            return 'T+4';
                        }
                    }
                }
                ,{field:'exchangeName', title: '交易所', templet:function (item) {
                        if (item.exchangeName == 1) {
                            return '上交所';
                        } else if (item.exchangeName == 2) {
                            return '深交所';
                        }
                    }
                }
                ,{field:'securityBeiiZhu', title: '备注'}
                // ,{title: '操作', width: 200, templet: '#toolEventDemo'}
                ,{fixed: 'right', title:'操作' ,align:'center', toolbar: '#barDemo'}
            ]]
        });
        table.on('toolbar(trackone)',function (obj) {
            var checkStatus=table.checkStatus(obj.config.id);//得到表格选中行的ID
            var securityName = $("#securityName").val();
            if (obj.event=='selecttwo'){
                table.reload('testSecurity',{
                    url:'select'
                    ,where: {
                        'securityName':securityName,
                    }
                    ,page:{
                        curr:1
                    }
                });
                $("#securityName").val(securityName);
            } else if (obj.event=='insert'){
                var index=layer.open({
                    area:['1000px','550px'],
                    type: 1,
                    title: '添加证券信息',
                    closeBtn: 1,
                    move:false,
                    content:$("#add")
                });
            }else if (obj.event=='delAll'){
                var data = checkStatus.data;
                if (data.length==0){
                    layer.msg("请至少选择一条数据")
                }else{
                    var idr =[];
                    for (var i = 0; i <data.length ; i++) {
                        idr.push(data[i].securityId)
                    }
                }
                $.get('delete','securityId='+idr.join(","),function (msg) {
                    table.reload('testSecurity')
                    layer.msg("本次删除数据"+checkStatus.data.length+"条")
                })
            }
        });
        table.on('tool(trackone)',function (obj) {
            var data = obj.data;
            if (obj.event=='del'){
                $.get('delete','securityId='+data.securityId,function (msg) {
                    table.reload('testSecurity')
                })
            }else if (obj.event=='update'){
                var bookObj=$.parseJSON(JSON.stringify(data));
                form.val("upform",bookObj);
                var index=layer.open({
                    area:['1000px','550px'],
                    type: 1,
                    title: '修改证券信息',
                    closeBtn: 1,
                    move:false,
                    content:$("#up")
                });
            }
        });
        form.on('submit(addsubmit)',function () {
            var formData= form.val("addform");
            $.post('insertSecurity',formData,
                function(msg) {
                    table.reload('testSecurity')
                    alert(msg)
                });
        });
        form.on('submit(upsubmit)',function () {
            var formData= form.val("upform");
            $.post('update',formData,
                function(msg) {
                    table.reload('testSecurity')
                    alert(msg)
                });
        });
        laydate.render({
            elem:'#releaseDates',
            trigger:'click',
        })
        laydate.render({
            elem:'#releaseDate',
            trigger:'click',
        });
    });
    layui.use(['tableSelect'],function () {
        //加载用到layui组件
        var form = layui.form;
        var $=layui.$;
        var tableSelect = layui.tableSelect;
        //下拉表格 的渲染
        tableSelect.render({
            elem: '#stockName',//渲染表格 与 文本框绑定
            searchKey:'stockName',
            table: {
                url: 'selectstockthree',//数据接口
                cols: [[
                    {type: 'checkbox', fixed: 'left'},
                    {field:'stockId',title: '板块编号'}
                    ,{field:'stockName',title: '板块名称'}
                    ]]
            },
            //回调函数
            done: function (elem, data) {
                var Name='';
                $.each(data.data,function (index,item) {
                    Name=item.stockName;
                    $("#stockId").val(item.stockId);
                });
                elem.val(Name);
            }
        })
    })
    layui.use(['tableSelect'],function () {
        //加载用到layui组件
        var form = layui.form;
        var $=layui.$;
        var tableSelect = layui.tableSelect;
        //下拉表格 的渲染
        tableSelect.render({
            elem: '#stockName2',//渲染表格 与 文本框绑定
            searchKey:'stockName',//后端根据这个名称得到下拉表格中文本框的值
            table: {
                url: 'selectstockthree',//数据接口
                cols: [[
                    {type: 'checkbox', fixed: 'left'},
                    {field:'stockId',title: '板块编号'}
                    ,{field:'stockName',title: '板块名称'}
                ]]
            },
            //回调函数
            done: function (elem, data) {
                var Name='';
                //遍历选中的数据
                $.each(data.data,function (index,item) {
                    Name=item.stockName;
                    $("#stockId2").val(item.stockId);
                });
                elem.val(Name);//给输入框里显示的值赋值
            }
        })
    })
</script>

<table id="trackone" lay-filter="trackone" ></table>
<div id="add"
     style="display: none; height: 100%; height: 100%; text-align: center;">
    <form id="addform" lay-filter="addform"
          class="layui-form layui-form-pane"
          style="margin: 30px auto; display: inline-block; width: 100%;">
        <div style=" Float: left; width: 40%;margin-left:10%" >
            <div class="layui-form-item" style="text-align: center;">
                <label class="layui-form-label">证券编号</label>
                <div class="layui-input-inline">
                    <input type="text" name="securityId" lay-verify="required"
                           autocomplete="off" placeholder="请输入编号" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item" style="text-align: center;">
                <label class="layui-form-label">证券名称</label>
                <div class="layui-input-inline">
                    <input  type="text" name="securityName" lay-verify="required"
                           autocomplete="off" placeholder="请输入名称" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">证券类型</label>
                <div class="layui-input-inline">
                    <select name="securitType">
                        <option value="1">股票</option>
                        <option value="2">债券</option>
                    </select>
                </div>
            </div>

            <div class="layui-form-item" style="text-align: center;">
                <label class="layui-form-label">股票板块：</label>
                <div class="layui-input-inline">
                    <input type="text" name="stockName" id="stockName" lay-verify="required" autocomplete="off" placeholder="请选择" class="layui-input">
                    <input type="hidden" id="stockId" name="stockId">
                </div>
            </div>
        </div>
        <div style=" Float: left; width: 40%; margin-left:10%">
            <div class="layui-form-item" style="text-align: center;">
                <label class="layui-form-label">发行日期：</label>
                <div class="layui-input-inline">
                    <input  name="releaseDate" lay-verify="required"
                            autocomplete="off" placeholder="请选择日期" class="layui-input" id="releaseDate">
                </div>
            </div>
            <div class="layui-form-item" style="text-align: center;">
                <label class="layui-form-label layui-bg-gray">延迟日期</label>
                <div class="layui-input-inline">
                    <select name="delayDate">
                        <option value="1">T+1</option>
                        <option value="2">T+2</option>
                        <option value="3">T+3</option>
                        <option value="4">T+4</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item" style="text-align: center;">
                <label class="layui-form-label">交易所：</label>
                <div class="layui-input-inline">
                    <select name="exchangeName">
                        <option value="1">上交所</option>
                        <option value="2">深交所</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item" style="text-align: center;">
                <label class="layui-form-label">备注</label>
                <div class="layui-input-inline">
                    <input type="text" name="securityBeiiZhu"
                           autocomplete="off" placeholder="请输入备注" class="layui-input">
                </div>
            </div>
        </div>
        <div style="position: absolute; bottom: 200px; left: 31.5%;">
            <button class="layui-btn" lay-submit="" lay-filter="addsubmit">
                <i class="layui-icon">&#x1005;</i>添加
            </button>
        </div>
        <div style="position: absolute; bottom: 200px; left: 60%;">
            <!--lay-submit="" 具备提交功能  lay-filter   具有筛选作用-->
            <button class="layui-btn layui-bg-red cancel" type="button">
                <i class="layui-icon">&#x1006;</i>取消
            </button>
        </div>
    </form>
</div>
<div id="up"
     style="display: none; height: 100%; height: 100%; text-align: center;">
    <form id="upform" lay-filter="upform"
          class="layui-form layui-form-pane"
          style="margin: 30px auto; display: inline-block;width: 100%">
        <div style=" Float: left; width: 40%;margin-left:10%" >
            <div class="layui-form-item" style="text-align: center;">
                <label class="layui-form-label">证券编号</label>
                <div class="layui-input-inline">
                    <input type="text" name="securityId" lay-verify="required"
                           autocomplete="off" placeholder="请输入编号" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item" style="text-align: center;">
                <label class="layui-form-label">证券名称</label>
                <div class="layui-input-inline">
                    <input type="text" name="securityName" lay-verify="required"
                           autocomplete="off" placeholder="请输入名称" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">证券类型</label>
                <div class="layui-input-inline">
                    <select name="securitType">
                        <option value="1">股票</option>
                        <option value="2">债券</option>
                    </select>
                </div>
            </div>

            <div class="layui-form-item" style="text-align: center;">
                <label class="layui-form-label">股票板块：</label>
                <div class="layui-input-inline">
                    <input type="text" name="stockName" id="stockName2" lay-verify="required"
                           autocomplete="off" placeholder="请选择" class="layui-input">
                    <input type="hidden" id="stockId2" name="stockId">

                </div>
            </div>
        </div>
        <div style=" Float: left; width: 40%; margin-left:10%">
            <div class="layui-form-item" style="text-align: center;">
                <label class="layui-form-label">发行日期：</label>
                <div class="layui-input-inline">
                    <input  name="releaseDate" lay-verify="required"
                            autocomplete="off" placeholder="请选择日期" class="layui-input" id="releaseDates">
                </div>
            </div>
            <div class="layui-form-item" style="text-align: center;">
                <label class="layui-form-label layui-bg-gray">延迟日期</label>
                <div class="layui-input-inline">
                    <select name="delayDate" id="">
                        <option value="1">T+1</option>
                        <option value="2">T+2</option>
                        <option value="3">T+3</option>
                        <option value="4">T+4</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item" style="text-align: center;">
                <label class="layui-form-label">交易所：</label>
                <div class="layui-input-inline">
                    <select name="exchangeName">
                        <option value="1">上交所</option>
                        <option value="2">深交所</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item" style="text-align: center;">
                <label class="layui-form-label">备注</label>
                <div class="layui-input-inline">
                    <input type="text" name="securityBeiiZhu"
                           autocomplete="off" placeholder="请输入备注" class="layui-input">
                </div>
            </div>
        </div>
        <div style="position: absolute; bottom: 200px; left: 31.5%;">
            <button class="layui-btn" lay-submit="" lay-filter="upsubmit">
                <i class="layui-icon">&#x1005;</i>修改
            </button>
        </div>
        <div style="position: absolute; bottom: 200px; left: 60%;">
            <!--lay-submit="" 具备提交功能  lay-filter   具有筛选作用-->
            <button class="layui-btn layui-bg-red cancel" type="button">
                <i class="layui-icon">&#x1006;</i>取消
            </button>
        </div>
    </form>
</div>
<div style="display: none;" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="update"><i
            class="layui-icon">&#xe642;</i>修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i
            class="layui-icon">&#xe640;</i>删除</a>
</div>

</body>
</html>